<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线音乐播放器 - 余诗镘</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background"></div>
    <div class="player-container">
        <h1>在线音乐播放器</h1>
        <p class="student-info">学号：23215220315 | 姓名：余诗镘</p>
        
        <div class="cover-container">
            <img id="cover" src="images/cover1.jpg" alt="专辑封面">
        </div>
        
        <div class="song-info">
            <h2 id="song-title">歌曲名称</h2>
            <p id="artist">歌手</p>
        </div>
        
        <div class="progress-container">
            <span id="current-time">0:00</span>
            <input type="range" id="progress" min="0" value="0">
            <span id="duration">0:00</span>
        </div>

        <div class="lyrics-container">
            <div id="lyrics"></div>
        </div>
        
        <div class="controls">
            <button id="prev-btn">上一曲</button>
            <button id="play-btn">播放</button>
            <button id="next-btn">下一曲</button>
        </div>
        
        <div class="volume-control">
            <span>音量:</span>
            <input type="range" id="volume" min="0" max="1" step="0.1" value="0.7">
        </div>
        
        <div class="playlist-container">
            <div class="search-container">
                <input type="text" id="search" placeholder="搜索歌曲或歌手...">
            </div>
            <h3>播放列表</h3>
            <ul id="playlist"></ul>
        </div>
    </div>
    
    <audio id="audio-player"></audio>
    
    <script src="script.js"></script>
</body>
</html>